import React, { Component } from 'react'
import PropTypes from 'prop-types';

export class Left extends Component {
    render() {
        const { list, activeId, changeLeft } = this.props;
        return (
            <div className='left'>
                {
                    list.length ?
                        list.map(item => {
                            return <li
                                key={item.id}
                                onClick={() => {
                                    changeLeft(item.id) //内容开关改变
                                }}
                                className={ item.id === activeId? "bg":""} //高亮切换
                            >
                                {item.title}
                            </li>
                        }) : "暂无数据"
                }
            </div>
        )
    }
}

// 数据类型校验 
Left.propTypes = {
    list: PropTypes.array,
    changeLeft: PropTypes.func.isRequired,
};

// 设置默认值
Left.defaultProps = {
    list: []
};

export default Left